<template>
	<action-bar type="back" isWhite="1" title="轮巡计划"></action-bar>
	<tishi ref="showtishi" isclen="1" bgcolor="#fc474c" title="您确定要退出登录吗？"></tishi>
	<tishi ref="showtishi" isclen="1" bgcolor="#fc474c" title="您确定要退出登录吗？"></tishi>
	<view class="patrol u-f u-f-column">
		<view class="navTop" v-show="!fullScreenFlag">

		</view>
		<view class="content u-f u-f-column">
			<view class="staList u-f u-f-column">
				<view class="AnNiu u-f-item u-f-jsb">
					<view class="l u-f-justify cursor" @click="TianJiaRenWu">
						添加任务
					</view>
					<el-popconfirm title="删除后不可恢复，请谨慎操作!" @confirm="SaiXuanShanChuClick">
						<template #reference>
							<view class="r u-f-justify cursor">
								删除
							</view>
						</template>
					</el-popconfirm>
				</view>
				<view class="DiYiHang u-f-item">
					<view class="niu u-f-justify">
						<el-checkbox v-model="checked1" size="large" @change="QuanXuanClick" />
					</view>
					<view class="name u-f-item">
						<text>任务名称</text>
					</view>
					<view class="miaoShu u-f-item">
						<text>任务描述</text>
					</view>
					<view class="sta u-f-justify">
						状态
					</view>
					<view class="caoZuo u-f-justify">
						操作
					</view>
				</view>
				<view class="contentList">
					<view class="itemHang u-f-item" v-for="(item,index) in list" :key="index">
						<view class="niu u-f-justify">
							<el-checkbox v-model="item.falg" size="large" />
						</view>
						<view class="name u-f-item singleLine">
							<text>{{item.pollPlanName}}</text>
						</view>
						<view class="miaoShu u-f-item singleLine">
							<text>{{item.pollDesc}}</text>
						</view>
						<view class="sta u-f-justify">
							<view class="tiZhi u-f-justify" v-if="item.status==0">
								停止
							</view>
							<view class="ZhiXing u-f-justify" v-if="item.status==1">
								执行中
							</view>
						</view>
						<view class="caoZuo u-f-justify">
							<view class="item3 u-f-item">
								<view class="u-f-item bianji cursor" @click="BianJiClick(item)">
									<view>
										<image src="/static/img/jiankong/67.png" style="width: 16px;" mode="widthFix">
										</image>
									</view>
									<view class="text">编辑</view>
								</view>
								<el-popconfirm title="删除后不可恢复，请谨慎操作!" @confirm="ShanChuItemClick(item)">
									<template #reference>
										<view class="u-f-item shanchu cursor">
											<view>
												<image src="/static/img/jiankong/68.png" style="width: 16px;"
													mode="widthFix"></image>
											</view>
											<view class="text">删除</view>
										</view>
									</template>
								</el-popconfirm>
							</view>
						</view>
					</view>
				</view>

				<view class="u-f-item u-f-jsb bottom">
					<view class="tool">
						共 {{total}} 条数据
					</view>
					<view>
						<el-pagination background v-model:current-page="currentPage3" v-model:page-size="pageSize3"
							layout="prev,sizes, pager, next, jumper" :total="total" :page-sizes="[10, 20, 30, 40,50]" />
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		ElMessage
	} from 'element-plus'
	export default {
		data() {
			return {
				list: [],
				total: 0,
				checked1: false
			}
		},
		onShow() {
			this.getList()
			if (flutter) {
				flutter.call('setActionBar', {
					type: 'back',
					title: "轮巡计划",
					isWhite: true,
					onDownloads: "",
					onSettings: '',
					onBack: 'handleBack()',
					onClose: 'handleClickclose()'
				}, (result, error) => {})
			}
			window.handleClickclose = () => {
				uni.$emit('exitclose')
				this.$refs.showtishi.show()
			}
			window.handleBack = () => {
				this.back()
			}
		},
		methods: {
			getList() {
				this.http('/v1/polling/plan/page', {
					pageNum: 1,
					pageSize: 10,
				}).then(res => {
					this.list = res.rows
					this.list.forEach(item => {
						item.falg = false
					})
					this.total = res.total
				})
			},
			TianJiaRenWu() {
				uni.navigateTo({
					url: '/pages/jiankong/patrolinfo'
				})
			},
			ShanChuItemClick(item) {
				this.http('/v1/polling/plan/delete', {
					pollPlanIds: [item.id]
				}, 'POST').then(res => {
					ElMessage({
						message: '删除成功',
						type: 'success',
						plain: true,
					})
					this.getList()
				})
			},
			QuanXuanClick() {
				if (this.checked1) {
					this.list.forEach(item => {
						item.falg = true
					})
				} else {
					this.list.forEach(item => {
						item.falg = false
					})
				}
			},
			SaiXuanShanChuClick() {
				let arr = []
				this.list.forEach(item => {
					if (item.falg) {
						arr.push(item.id)
					}
				})
				if (!arr.length) {
					return ElMessage.error('请先选择一条任务数据！')
				}
				this.http('/v1/polling/plan/delete', {
					pollPlanIds: arr
				}, 'POST').then(res => {
					ElMessage({
						message: '删除成功',
						type: 'success',
						plain: true,
					})
					this.checked1 = false
					this.getList()
				})
			},
			BianJiClick(item) {
				uni.navigateTo({
					url: '/pages/jiankong/patrolinfo?id=' + item.id
				})
			}
		}
	}
</script>


<style scoped lang="scss">
	.patrol {
		width: 100%;
		height: 100vh;
		background-color: #1F1F1F;
		overflow: hidden;
		color: #fff;

		.navTop {
			padding: 0 24px 0 32px;
			background-color: #2C2C2C;
			border-bottom: 1px solid #383838;
			min-height: 50px;
		}

		.content {
			flex: 1;

			.staList {
				padding: 20px 32px;
				flex: 1;

				.AnNiu {
					height: 72px;
					background: #2c2c2c;

					.l {
						width: 89px;
						height: 32px;
						background: #165fff;
						border-radius: 6px;
						box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
						margin-left: 32px;
					}

					.r {
						width: 76px;
						height: 32px;
						background: #585858;
						border-radius: 2px;
						margin-right: 32px;
					}
				}

				.DiYiHang {
					height: 40px;
					background: #383838;
					margin-top: 10px;
					margin-bottom: 3px;

					.niu {
						width: 50px;
						height: 40px;
						background: #383838;
					}

					.name {
						flex: 1;
						height: 40px;
						background: #383838;

						text {
							padding-left: 14px;
						}
					}

					.miaoShu {
						flex: 1;
						height: 40px;
						background: #383838;

						text {
							padding-left: 14px;
						}
					}

					.sta {
						width: 228px;
						height: 40px;
						background: #383838;
					}

					.caoZuo {
						flex: 1;
					}
				}

				.contentList {
					flex: 1;
				}

				.itemHang {
					height: 56px;
					background: #383838;
					margin-bottom: 3px;

					.niu {
						width: 50px;
						background: #383838;
					}

					.name {
						flex: 1;

						background: #383838;

						text {
							padding-left: 14px;
						}
					}

					.miaoShu {
						flex: 1;
						background: #383838;

						text {
							padding-left: 14px;
						}
					}

					.sta {
						width: 228px;
						background: #383838;

						.tiZhi {
							width: 48px;
							height: 20px;
							background: rgba(240, 88, 98, 0.10);
							border: 1px solid #f05862;
							border-radius: 2px;
							font-size: 12px;
							font-family: Source Han Sans CN, Source Han Sans CN-400;
							font-weight: 400;
							text-align: LEFT;
							color: #f05862;
						}

						.ZhiXing {
							width: 47px;
							height: 20px;
							background: rgba(39, 225, 122, 0.20);
							border: 1px solid #27e17a;
							border-radius: 2px;
							font-size: 12px;
							font-family: Source Han Sans CN, Source Han Sans CN-400;
							font-weight: 400;
							text-align: LEFT;
							color: #27e17a;
						}
					}

					.caoZuo {
						flex: 1;

						.item3 {
							width: 120px;

							.bianji {
								.text {
									font-size: 14px;
									font-family: Source Han Sans CN, Source Han Sans CN-400;
									font-weight: 400;
									text-align: CENTER;
									color: #43c4ff;
									margin-left: 5px;
									white-space: nowrap;
									margin-right: 20px;
								}
							}

							.shanchu {
								margin-left: 10px;

								.text {
									font-size: 14px;
									font-family: Source Han Sans CN, Source Han Sans CN-400;
									font-weight: 400;
									text-align: CENTER;
									color: #D46262;
									margin-left: 5px;
									white-space: nowrap;
								}
							}
						}
					}
				}

				.bottom {
					height: 70px;

					.tool {
						font-size: 14px;
						font-family: Microsoft YaHei UI, Microsoft YaHei UI-400;
						font-weight: 400;
						text-align: LEFT;
						color: #ffffff;
						margin-left: 24px;
					}
				}
			}
		}
	}
</style>


<style scoped>
	/*flex*/
	.u-f,
	.u-f-item,
	.u-f-justify,
	.u-f-right,
	.u-f-bottom,
	.u-f-end,
	.u-f-jsb {
		display: flex;
	}

	.u-f-bottom {
		align-items: flex-end;

	}

	.u-f-item,
	.u-f-justify,
	.u-f-right {
		align-items: center;
	}

	.u-f-justify {
		justify-content: center;
	}

	.u-f-right {
		justify-content: flex-end;
	}

	.u-f-around {
		justify-content: space-around;
	}

	.u-f-jsb {
		justify-content: space-between;
	}

	.u-f-end {
		justify-content: flex-end;
	}

	.u-f-column {
		flex-direction: column;
	}

	.u-f-wrap {
		flex-wrap: wrap;
	}



	.cursor {
		cursor: pointer;
	}

	.singleLine {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.img {
		width: 100%;
		height: 100%;
	}

	.multipleLines {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
	}

	/* 覆盖默认样式 */
	.custom-select /deep/ .uni-select__input-text {
		color: #fff;
		/* 修改文字颜色 */
		font-size: 16px;
		/* 修改文字大小 */
		font-weight: bold;
		/* 修改文字粗细 */
	}

	.custom-select /deep/ .uni-select {
		border: none;
		background: #5c5c5c;
		border-radius: 6px;
	}
</style>